<template>
  <a-drawer
      :closable="true"
      :maskClosable="true"
      :title="title"
      :visible="visible"
      :width="drawerWidth"
      placement="right"
      style="height: 100%;overflow: auto;padding-bottom: 53px;"
      @close="handleCancel">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button icon="appstore" style="height:20px;width:20px;border:0px" @click="toggleScreen"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户账号" prop="username">
          <a-input v-model="model.username" :readOnly="!!model.id" placeholder="请输入用户账号"/>
        </a-form-model-item>

        <template v-if="!model.id">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="登录密码" prop="password">
            <a-input v-model="model.password" placeholder="请输入登录密码" type="password"/>
          </a-form-model-item>

          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="确认密码" prop="confirmpassword">
            <a-input v-model="model.confirmpassword" placeholder="请重新输入登录密码" type="password" @blur="handleConfirmBlur"/>
          </a-form-model-item>
        </template>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户姓名" prop="realname">
          <a-input v-model="model.realname" placeholder="请输入用户姓名"/>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工号" prop="workNo">
          <a-input v-model="model.workNo" placeholder="请输入工号"/>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="职务">
          <j-select-position v-model="model.post" :multiple="false" placeholder="请选择职务"/>
        </a-form-model-item>

        <a-form-model-item v-show="!roleDisabled" :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色分配">
          <j-multi-select-tag
              v-model="model.selectedroles"
              :disabled="disableSubmit"
              :options="rolesOptions"
              placeholder="请选择角色">
          </j-multi-select-tag>
        </a-form-model-item>

        <!--部门分配-->
        <a-form-model-item v-show="!departDisabled" :labelCol="labelCol" :wrapperCol="wrapperCol" label="部门分配">
          <j-select-depart v-model="model.selecteddeparts" :backDepart="true" :multi="true" :treeOpera="true"
                           @back="backDepartInfo">>
          </j-select-depart>
        </a-form-model-item>

        <!--租户分配-->
        <a-form-model-item v-show="!departDisabled" :labelCol="labelCol" :wrapperCol="wrapperCol" label="租户分配">
          <j-multi-select-tag
              v-model="model.relTenantIds"
              :disabled="disableSubmit"
              :options="tenantsOptions"
              placeholder="请选择租户">
          </j-multi-select-tag>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份">
          <a-radio-group v-model="model.userIdentity" @change="identityChange">
            <a-radio :value="1">普通用户</a-radio>
            <a-radio :value="2">上级</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="departIdShow==true" :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责部门">
          <j-multi-select-tag
              v-model="model.departIds"
              :disabled="disableSubmit"
              :options="nextDepartOptions"
              placeholder="请选择负责部门">
          </j-multi-select-tag>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="头像">
          <j-image-upload v-model="model.avatar" class="avatar-uploader" text="上传"></j-image-upload>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="生日">
          <a-date-picker
              v-model="model.birthday"
              :format="dateFormat"
              :getCalendarContainer="node => node.parentNode"
              placeholder="请选择生日"
              style="width: 100%"/>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="性别">
          <a-select v-model="model.sex" :getPopupContainer="(target) => target.parentNode" placeholder="请选择性别">
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="2">女</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="邮箱" prop="email">
          <a-input v-model="model.email" placeholder="请输入邮箱"/>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号码" prop="phone">
          <a-input v-model="model.phone" placeholder="请输入手机号码"/>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="座机" prop="telephone">
          <a-input v-model="model.telephone" placeholder="请输入座机"/>
        </a-form-model-item>

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工作流引擎">
          <j-dict-select-tag v-model="model.activitiSync" :type="'radio'" dictCode="activiti_sync"
                             placeholder="请选择是否同步工作流引擎"/>
        </a-form-model-item>

      </a-form-model>
    </a-spin>


    <div v-show="!disableSubmit" class="drawer-bootom-button">
      <a-popconfirm cancelText="取消" okText="确定" title="确定放弃编辑？" @confirm="handleCancel">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button :loading="confirmLoading" type="primary" @click="handleSubmit">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import {getAction} from '@/api/manage'
import {addUser, duplicateCheck, editUser, queryall, queryUserRole} from '@/api/api'
import {disabledAuthFilter} from "@/utils/authFilter"

export default {
  name: "UserModal",
  components: {},
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
      roleDisabled: false, //是否是角色维护调用该页面
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      userId: "", //保存用户id
      disableSubmit: false,
      dateFormat: "YYYY-MM-DD",
      validatorRules: {
        username: [{required: true, message: '请输入用户账号!'},
          {validator: this.validateUsername,}],
        password: [{
          required: true,
          pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
          message: '密码由8位数字、大小写字母和特殊符号组成!'
        },
          {validator: this.validateToNextPassword, trigger: 'change'}],
        confirmpassword: [{required: true, message: '请重新输入登录密码!',},
          {validator: this.compareToFirstPassword,}],
        realname: [{required: true, message: '请输入用户名称!'}],
        phone: [{required: true, message: '请输入手机号!'}, {validator: this.validatePhone}],
        email: [{validator: this.validateEmail}],
        roles: {},
        workNo: [{required: true, message: '请输入工号'},
          {validator: this.validateWorkNo}],
        telephone: [{pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码'},]
      },
      departIdShow: false,
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
        userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
        userId: "/sys/user/generateUserId", // 引入生成添加用户情况下的url
        syncUserByUserName: "/act/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
        queryTenantList: '/sys/tenant/queryList'
      },
      tenantsOptions: [],
      rolesOptions: [],
      nextDepartOptions: [],
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token": token}
    this.initRoleList()
    this.initTenantList()
  },
  computed: {
    uploadAction: function () {
      return this.url.fileUpload;
    }
  },
  methods: {
    add() {
      this.refresh();
      this.edit({activitiSync: '1', userIdentity: 1});
    },
    edit(record) {
      let that = this;
      that.visible = true;
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize();
      that.userId = record.id;
      that.model = Object.assign({}, {selectedroles: '', selecteddeparts: ''}, record);
      //身份为上级显示负责部门，否则不显示
      if (this.model.userIdentity == 2) {
        this.departIdShow = true;
      } else {
        this.departIdShow = false;
      }

      if (record.hasOwnProperty("id")) {
        that.getUserRoles(record.id);
        that.getUserDeparts(record.id);
      }
      console.log('that.model=', that.model)
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code);
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
      } else {
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    //初始化租户字典
    initTenantList() {
      getAction(this.url.queryTenantList).then(res => {
        if (res.success) {
          this.tenantsOptions = res.result.map((item, index, arr) => {
            let c = {label: item.name, value: item.id + ""}
            return c;
          })
          console.log('this.tenantsOptions: ', this.tenantsOptions)
        }
      })
    },
    //初始化角色字典
    initRoleList() {
      queryall().then((res) => {
        if (res.success) {
          this.rolesOptions = res.result.map((item, index, arr) => {
            let c = {label: item.roleName, value: item.id}
            return c;
          })
          console.log('this.rolesOptions: ', this.rolesOptions)
        }
      });
    },
    getUserRoles(userid) {
      queryUserRole({userid: userid}).then((res) => {
        if (res.success) {
          this.model.selectedroles = res.result.join(",");
          console.log('that.model.selectedroles=', this.model.selectedroles)
        }
      });
    },
    getUserDeparts(userid) {
      let that = this;
      getAction(that.url.userWithDepart, {userId: userid}).then((res) => {
        if (res.success) {
          let departOptions = [];
          let selectDepartKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectDepartKeys.push(res.result[i].key);
            //新增负责部门选择下拉框
            departOptions.push({
              value: res.result[i].key,
              label: res.result[i].title
            })
          }
          that.model.selecteddeparts = selectDepartKeys.join(",")
          that.nextDepartOptions = departOptions;
          console.log('that.nextDepartOptions=', that.nextDepartOptions)
        }
      })
    },
    backDepartInfo(info) {
      this.model.departIds = this.model.selecteddeparts;
      this.nextDepartOptions = info.map((item, index, arr) => {
        let c = {label: item.text, value: item.value + ""}
        return c;
      })
    },
    refresh() {
      this.userId = ""
      this.nextDepartOptions = [];
      this.departIdShow = false;
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.disableSubmit = false;
      this.nextDepartOptions = [];
      this.departIdShow = false;
      this.$refs.form.resetFields();
    },
    moment,
    handleSubmit() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          //如果是上级择传入departIds,否则为空
          if (this.model.userIdentity !== 2) {
            this.model.departIds = "";
          }
          let obj;
          if (!this.model.id) {
            this.model.id = this.userId;
            obj = addUser(this.model);
          } else {
            obj = editUser(this.model);
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        } else {
          return false;
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword;
      if (value && confirmpassword && value !== confirmpassword) {
        callback('两次输入的密码不一样！');
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(['confirmpassword']);
      }
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback('两次输入的密码不一样！');
      } else {
        callback()
      }
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          };
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback("手机号已存在!")
            }
          })
        } else {
          callback("请输入正确格式的手机号码!");
        }
      }
    },
    validateEmail(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'email',
            fieldVal: value,
            dataId: this.userId
          };
          duplicateCheck(params).then((res) => {
            console.log(res)
            if (res.success) {
              callback()
            } else {
              callback("邮箱已存在!")
            }
          })
        } else {
          callback("请输入正确格式的邮箱!")
        }
      }
    },
    validateUsername(rule, value, callback) {
      var params = {
        tableName: 'sys_user',
        fieldName: 'username',
        fieldVal: value,
        dataId: this.userId
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback("用户名已存在!")
        }
      })
    },
    validateWorkNo(rule, value, callback) {
      var params = {
        tableName: 'sys_user',
        fieldName: 'work_no',
        fieldVal: value,
        dataId: this.userId
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback("工号已存在!")
        }
      })
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value
    },
    beforeUpload: function (file) {
      var fileType = file.type;
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片');
        return false;
      }
      //TODO 验证文件大小
    },
    identityChange(e) {
      if (e.target.value === 1) {
        this.departIdShow = false;
      } else {
        this.departIdShow = true;
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>